<script setup>
import {inject, onMounted, ref} from "vue";
import {doDelete, doGet, doPost, doPut} from "../../util/request.js";
import {useRoute, useRouter} from "vue-router";
import {confirmMessage, showMessage} from "../../util/message.js";

const flushPage = inject('flushPage')
// 创建路由对象
const router = useRouter()
// 创建路由参数对象
const route = useRoute()
// 市场活动详情对象
const activityDetailInfo = ref({})
// 根据标识查询市场活动详情
const loadActivityDetail = (id) => {
  doGet('/api/activity/detail/info/'+id,{}).then(res => {
    activityDetailInfo.value = res.data.data
  })
}

// 创建市场活动备注集合对象
const dataList = ref([])
// 创建市场活动备注分页对象
const pageInfo = ref({})

// 分页查询市场活动备注列表
const loadData = (current) => {
  doGet('/api/activity/remark/page',{
    current: current,
    activityId:route.params.id
  }).then(res => {
    dataList.value = res.data.data.list
    pageInfo.value.total = res.data.data.total
  })
}

// 提交备注表单验证规则
const formRules = {
  noteContent: [
      {required: true, message: '请输入活动备注', trigger: 'blur'},
      {min: 3, max: 255, message: '长度在 3 到 255 个字符', trigger: 'blur'}
  ]
}

const ruleFormRef = ref()
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      doPost('/api/activity/remark',{
        activityId:route.params.id,
        noteContent:activityDetailInfo.value.noteContent
      }).then(res => {
        if (res.data.code === 200) {
          // 重置表单
          ruleFormRef.value.resetFields()
          // 重新加载数据
          loadData(1)
        }
      })
    }
  })
}

// 修改市场活动活动备注弹出层控制器
const remarkDialogVisible = ref(false)
// 市场活动备注对象
const activityRemark = ref({})

const toEdit = (id,noteContent) => {
  remarkDialogVisible.value = true
  activityRemark.value.id = id
  activityRemark.value.noteContent = noteContent
}
const remarkRuleFormRef = ref()
// 提交修改市场活动备注
const updateActivityRemark = (formEl) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (valid) {
      // 准备参数
      let params = {
        id:activityRemark.value.id,
        noteContent:activityRemark.value.noteContent
      }
      // 发送编辑请求
      doPut('/api/activity/remark',params)
          .then(resp => {
            if (resp.data.code === 200) {
              showMessage("修改市场活动备注成功", 'success')
              remarkDialogVisible.value = false
              loadData(1)
            } else {
              showMessage("修改市场活动备注失败，原因："+resp.data.msg,'error')
            }
          })
    }
  })
}

// 重置表单
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

// 删除市场活动备注
const toDel = (id) => {
  // 弹框确认
  confirmMessage('您确认要删除吗？')
      .then(() => {
        doDelete('/api/activity/remark/'+id,{}).then(resp => {
          if (resp.data.code === 200) {
            showMessage("删除市场活动备注成功", 'success')
            loadData(1)
          } else {
            showMessage("删除市场活动备注失败，原因："+resp.data.msg,'error')
          }
        })
      })
}

onMounted(()=>{
  // 获取路由参数活动标识
  let activityId = route.params.id
  // 查询市场活动详情
  loadActivityDetail(activityId)
  // 分页查询市场活动备注列表
  loadData(1)
})
</script>

<template>
  <h1>市场活动详情页面</h1>

  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="activityDetailInfo"
      status-icon
      :rules="formRules"
      label-width="auto"
  >
    <el-form-item label="活动标识：" >
      {{activityDetailInfo.id}}
    </el-form-item>
    <el-form-item label="活动名称：" >
      {{activityDetailInfo.name}}
    </el-form-item>
    <el-form-item label="负责人：" >
      {{activityDetailInfo.ownerName}}
    </el-form-item>
    <el-form-item label="活动预算：" >
      {{activityDetailInfo.cost}}
    </el-form-item>
    <el-form-item label="开始时间：" >
      {{activityDetailInfo.startTime}}
    </el-form-item>
    <el-form-item label="结束时间：" >
      {{activityDetailInfo.endTime}}
    </el-form-item>
    <el-form-item label="创建时间：" >
      {{activityDetailInfo.createTime}}
    </el-form-item>
    <el-form-item label="创建人：" >
      {{activityDetailInfo.createByName}}
    </el-form-item>
    <el-form-item label="编辑时间：" >
      {{activityDetailInfo.editTime}}
    </el-form-item>
    <el-form-item label="编辑人：" >
      {{activityDetailInfo.editByName}}
    </el-form-item>
    <el-form-item label="活动描述：" >
      {{activityDetailInfo.description}}
    </el-form-item>

    <el-form-item label="活动备注：" prop="noteContent">
      <el-input v-model="activityDetailInfo.noteContent" type="textarea"
                maxlength="255" minlength="3" show-word-limit rows="6"/>
    </el-form-item>
  </el-form>
    <el-button type="primary" @click="submit(ruleFormRef)">提交</el-button>
    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    <el-button @click="router.back()">返回</el-button>
  <el-divider/>

  <h4>备注列表</h4>

  <el-table
      :data="dataList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="序号" type="index" width="80" />
    <el-table-column label="活动名称" width="200" property="activityName"/>
    <el-table-column label="负责人" property="ownerName"  width="120"/>
    <el-table-column label="创建时间" width="200" property="createTime"/>
    <el-table-column label="创建人" property="createByName"  width="120"/>
    <el-table-column label="编辑时间" width="200" property="editTime"/>
    <el-table-column label="编辑人" width="200" property="editByName"/>
    <el-table-column label="活动备注" width="150" property="noteContent" show-overflow-tooltip/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" size="small" @click="toEdit(scope.row.id,scope.row.noteContent)">编辑</el-button>
        <el-button size="small" type="danger" @click="toDel(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>&nbsp;</div>

  <el-pagination
      background layout="prev, pager, next"
      :total=pageInfo.total
      @change="loadData"/>

  <!-- 修改市场活动备注弹出层 -->
  <el-dialog
      v-model="remarkDialogVisible"
      title="修改市场活动备注"
      width="500"
      :close-on-click-modal=false
      :show-close=false
      align-center>

    <el-form
        style="max-width: 600px"
        status-icon
        :model="activityRemark"
        label-width="auto"
        :rules="formRules"
        ref="remarkRuleFormRef"
    >
      <el-input type="hidden" v-model="activityRemark.id"/>
      <el-form-item label="活动备注：" prop="noteContent">
        <el-input v-model="activityRemark.noteContent" type="textarea"
                  maxlength="255" minlength="3" show-word-limit rows="6"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateActivityRemark(remarkRuleFormRef)">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>